<template>
	<div class="diy-goods component-diy" :style="{
      marginTop: componentData.config.marginTop + 'px',
      marginBottom: componentData.config.marginBottom + 'px',
      padding: `0 ${componentData.config.marginLeftRight}px`,
    }">
		<div class="goods-list" :class="componentData.config.noBegin == 2 ? 'filter' : ''" v-if="componentData.config.snapupCheckedId" :style="{
        backgroundColor: componentData.config.bgColor,
        borderRadius: componentData.config.cardStyle == 2 ? '0' : '8px',
        padding: `0px ${componentData.config.paddingLeftRight}px ${componentData.config.paddingTopBottom}px ${componentData.config.paddingLeftRight}px`,

      }">
			<div class="snapup-title">
				<span style="display: flex;height: 25px;line-height: 25px;"><i :class="'iconfonts '+icon"
						style="margin-right: 5px"></i>{{componentData.config.title}}</span>
				<span class="time_box" style="font-size: 12px">
					{{componentData.config.str}}
					<block v-if="componentData.config.str!='活动已结束'&&componentData.config.str!='距开始'">
						<block v-if="time_arr.d>0 && time_arr.d!='00'">
							<view :style="{
						color:componentData.config.bgColor
					}">{{time_arr.d}}</view>天
						</block>
						<block>
							<view :style="{
						color:componentData.config.bgColor
					}">{{time_arr.h}}</view>:
						</block>
						<block>
							<view :style="{
						color:componentData.config.bgColor
					}">{{time_arr.m}}</view>:
						</block>
						<block>
							<view :style="{
						color:componentData.config.bgColor
					}">{{time_arr.s}}</view>
						</block>
					</block>
				</span>
				<span style="font-size: 12px;float: right" @click="toAll()">查看更多 ><i class="el-icon-arrow-right"></i></span>
			</div>

			<diy-goods :componentData="componentData.componentData[0]" :disable="disable" :layout="componentData.config.layout"
				:cardStyle="componentData.config.cardStyle" :oldData="componentData.componentData[0].data.goodsChecked[0]"
				:noBegin="componentData.config.noBegin" style="width:100%"></diy-goods>
		</div>
	</div>
</template>
<script>
	var app = getApp().globalData
	import diyGoods from "@/pages/store/components/diy-goods/diy-goods"

	export default {
		components: {
			diyGoods
		},
		props: ["componentData", "AllUrl", "dataUrl", "icon"],
		data() {
			return {
				goods: [],
				imagesStyle: "",
				imageHeight: "",
				buyBtn: {
					key: 1,
					type: "primary",
					round: "0",
					icon: "",
				},
				styleElement: null,
				carouselClass: "",
				timer: null,
				time_arr: {
					d: 0,
					h: 0,
					s: 0,
					m: 0
				},
				disable: 0,
			};
		},

		computed: {
			couponBg(val) {
				return `linear-gradient(135deg, transparent 30px, ${this.componentData.config.couponBg} 30px)`;
			},
			snapupChecked() {
				if (this.componentData.config.snapupCheckedId) {
					return this.componentData.config.snapupCheckedId
				}
				return null;
			},
		},
		filters: {
			perMoney(val) {
				return val / 100;
			},
		},
		methods: {
			toAll: function() {
				uni.navigateTo({
					url: this.AllUrl,
				})
			},
			async getSnapupTimes() {
				// 获取活动倒计时
				let url = this.dataUrl;
				const {
					status,
					data,
					message,
				} = await this.$request({
					url
				}, {
					id: this.componentData.config.snapupCheckedId
				});

				if (status == 1) {
					let str, noBegin, state;
					if (data.underway && data.underway.length) {
						str = '距结束:';
						this.formatTime(data.underway[0], 'underway');
						noBegin = 0;
						state = '进行中';
						this.disable = 0;
					} else if (data.no_start && data.no_start.length) {
						str = '距开始:';
						this.formatTime(data.no_start[0], 'no_start');
						noBegin = 1;
						state = '未开始';
						this.disable = 1;
					} else {
						str = '活动已结束';
						noBegin = 2;
						state = '已结束';
						this.disable = 1;
						this.componentData.config.timerStr = '';
					}
					this.componentData.config.str = str;
					this.componentData.config.noBegin = noBegin;
					this.componentData.config.state = state
				}
			},
			formatTime(obj, type) {
				if (!type && !obj) return null
				clearInterval(this.timer);
				let now = new Date().getTime();
				let end_time = obj.end_time.replace(/-/g, '/');
				let start_time = obj.start_time.replace(/-/g, '/');
				let timeT = type == 'underway' ? new Date(end_time).getTime() : new Date(start_time).getTime();
				let time = Math.floor(Math.abs(now - timeT) / 1000);
				this.timer = setInterval(() => {
					if (time > 0) {
						this.componentData.config.timerStr = this.formatSeconds(time)
						time--;
					} else {
						setTimeout(() => {
							clearInterval(this.timer);
							this.getSnapupTimes();
						})
					}
				}, 1000)
			},
			formatSeconds(t) {


				let mi = 60,
					hh = mi * 60,
					dd = hh * 24;
				let d = Math.floor(t / dd),
					h = this.formatBit(Math.floor((t - d * dd) / hh)),
					m = this.formatBit(Math.floor((t - d * dd - h * hh) / mi)),
					s = this.formatBit(Math.floor((t - d * dd - h * hh - m * mi)));
				this.time_arr = {
					d: d,
					h: h,
					m: m,
					s: s
				}

			},
			formatBit(v) {
				v = +v
				return v > 9 ? v : '0' + v
			},
			getHeight() {
				this.$nextTick(() => {
					this.$refs["img-ctx"] &&
						this.$refs["img-ctx"].some((item) => {
							try {
								const arr = this.componentData.imgRatio.split(":");
								this.imageHeight = (item.offsetWidth * arr[1]) / arr[0];
								// 通知父组件视图更新完毕
								this.$emit('renderSuccess');
								return true;
							} catch (e) {}
						});
				});
			},
		},
		mounted() {
			if (!!this.componentData.config.snapupCheckedId) {
				this.getSnapupTimes();
			}
		},
		destroyed() {
			if (this.styleElement) {
				this.styleElement.parentNode.removeChild(this.styleElement);
			}
		},
		watch: {
			"componentData.config.snapupCheckedId": {
				immediate: true,
				handler(n) {
					this.getHeight();
					if (!!n) {
						this.getSnapupTimes();
					}
				},
			},
			"componentData.marginLeftRight": {
				immediate: true,
				handler(n) {
					this.getHeight();
				},
			},
			"componentData.marginTop": {
				immediate: true,
				handler(n) {
					this.getHeight();
				},
			},
			"componentData.marginBottom": {
				immediate: true,
				handler(n) {
					this.getHeight();
				},
			},
			"componentData.paddingTopBottom": {
				immediate: true,
				handler(n) {
					this.getHeight();
				},
			},
			"componentData.layout": {
				deep: true,
				immediate: true,
				handler(n) {
					this.getHeight();
				},
			},
			"componentData.imgRatio": {
				deep: true,
				immediate: true,
				handler(n) {
					this.getHeight();
				},
			},

		},
	};
</script>
<style lang="scss" scoped>
	// @font-face {
	// 	font-family: "iconfonts";
	// 	/* Project id 3823482 */
	// 	src: url('~@/static/font/iconfont.woff2?t=1671672155713') format('woff2'),
	// 		url('~@/static/font/iconfont.woff?t=1671672155713') format('woff'),
	// 		url('~@/static/font/iconfont.ttf?t=1671672155713') format('truetype');
	// }

	// .iconfonts {
	// 	font-family: "iconfonts" !important;
	// 	font-size: 16px;
	// 	font-style: normal;
	// 	-webkit-font-smoothing: antialiased;
	// 	-moz-osx-font-smoothing: grayscale;
	// }

	// .icon-zhuangxiu:before {
	// 	content: "\e621";
	// }

	// .icon-zhuangshizhuangxiu:before {
	// 	content: "\e612";
	// }

	// .icon-yushou:before {
	// 	content: "\e714";
	// }

	// .icon-yushouxiangmu:before {
	// 	content: "\e60b";
	// }

	// .icon-lipinka1:before {
	// 	content: "\e8b21";
	// }

	// .icon-lipinka:before {
	// 	content: "\e61c";
	// }

	// .icon-retail_lipinka:before {
	// 	content: "\e60a";
	// }

	// .icon-ziyuan:before {
	// 	content: "\e63c";
	// }

	// .icon-miaosha:before {
	// 	content: "\e6fa";
	// }

	// .icon-cuxiaozhengce:before {
	// 	content: "\e6aa" !important;
	// }

	.time_box {
		display: flex;
		height: 22px;
		line-height: 22px;
	}

	.time_box>view {
		display: block;
		width: 20px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		background: #fff;
		margin: 2px;
	}
</style>
<style lang="scss" scoped>
	/*滚动条样式*/
	.goods-list::-webkit-scrollbar {
		height: 0px;
	}

	.goods-list::-webkit-scrollbar-thumb {
		border-radius: 10px;
		// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: rgba(0, 0, 0, 0.2);
	}

	.goods-list::-webkit-scrollbar-track {
		// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 0;
		background: rgba(0, 0, 0, 0.1);
	}

	.goods-list.filter {
		filter: grayscale(100%);
	}
</style>
<style lang="less">
	.diy-goods {
		// padding: 0 10px;
		overflow: hidden;
		box-sizing: border-box;

		// background-color: rgba(0, 255, 0, 0.1);
		.goods-list {
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			.snapup-title {
				width: 100%;
				height: 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;
				font-size: 14px;

				span:first-child {
					font-size: 16px;
					font-weight: bold;
				}
			}
		}
	}
</style>
